<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div{border: solid 1px black;margin: 10px;padding: 20px;}
  </style>
</head>
<body>
  
  <div class="box1">
    <p>这是box1，有一个 <em></em> 数据</p>
    <p>拿到了box2的数据：<span></span></p>
    <input type="button" value="发给box2" class="send">
  </div>
  
  <div class="box2">
    <p>这是box2，有一个 <em></em> 数据</p>
    <p>拿到了box1的数据：<span></span></p>
    <input type="button" value="发给box1" class="send">
  </div>

</body>
<script src="./event.js"></script>
<script>
  // // 两个兄弟功能，之间的数据，不能互通
  // function fn1(){
  //   const a = "hello"
  
  // }
  // function fn2(){
  //   // 拿到 fn1内的a，a为hello
  //   console.log(a)
  // }
  // fn1();
  // fn2();
  
  // 利用父级功能，将兄弟1的数据绑定到父级功能上，另一个兄弟就可以读取父级功能的数据
  // (function(){
  //   const a = "hello"
  //   function fn1(){

  //   }
  //   function fn2(){
  //     // 拿到 fn1内的a，a为hello
  //     console.log(a)
  //   }
  //   fn1();
  //   fn2();
  // })()

  // ==========

  // 中介：event
  // 绑定，没有执行动作，只是添加函数
  // 发布，有执行动作，会执行函数
  // 注意：先绑定，再触发

  // function fn1(){
  //   const a = "hello";
  //   // 触发事件：发送数据
  //   event.emit("abc", a);
  // }

  // function fn2(){
  //   // 拿到 fn1内的a，a为hello
  //   // 绑定事件：接收数据
  //   event.add("abc", function(a){
  //     console.log(a)
  //   })
  // }

  // // 先绑定
  // fn2();
  // // 再发送（触发）
  // fn1();




  // =============

  // 兄弟互传

  const box1Send = document.querySelector(".box1 .send")
  const box1Em = document.querySelector(".box1 em")
  const box1Span = document.querySelector(".box1 span")
  
  const box2Send = document.querySelector(".box2 .send")
  const box2Em = document.querySelector(".box2 em")
  const box2Span = document.querySelector(".box2 span")

  function box1(){
    const msg = "hello";
    box1Em.innerHTML = msg;
    // 点击box1的按钮
    box1Send.onclick = function(){
      // 发送数据
      event.emit("qwe", msg);
    }
    // 准备接收box2发送的数据
    event.add("asd", function(data){
      box1Span.innerHTML = data;
    })
  }

  function box2(){
    const msg = "world";
    box2Em.innerHTML = msg;
    // 准备接收box1发送的数据
    event.add("qwe", function(data){
      box2Span.innerHTML = data;
    })
    // 点击box2的按钮
    box2Send.onclick = function(){
      // 发送数据
      event.emit("asd", msg);
    }
  }

  box1();
  box2();




  // 组件传值：兄弟组件传值
    // 借助父组件
    // 借助中介（bus）对象


</script>
</html>